import React from 'react';

/**
 * 显示在线用户列表的组件
 * @param {Object} props
 * @param {Array} props.users - 在线用户列表
 */
const OnlineUsersBadge = ({ users }) => {
    if (!users || users.length === 0) return null;

    return (
        <div
            style={{
                position: 'absolute',
                top: '10px',
                right: '10px',
                backgroundColor: 'rgba(255,255,255,0.9)',
                borderRadius: '5px',
                padding: '5px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                zIndex: 1000,
                maxWidth: '200px',
                fontSize: '12px'
            }}
        >
            <div
                style={{
                    fontWeight: 'bold',
                    marginBottom: '5px',
                    borderBottom: '1px solid #eee',
                    paddingBottom: '3px'
                }}
            >
                在线用户 ({users.length})
            </div>
            <div>
                {users.map((user) => (
                    <div
                        key={user.id}
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            marginBottom: '4px',
                            padding: '2px'
                        }}
                    >
                        <div
                            style={{
                                width: '10px',
                                height: '10px',
                                borderRadius: '50%',
                                backgroundColor: user.color || '#f44336',
                                marginRight: '8px'
                            }}
                        ></div>
                        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            {user.name} {user.isCurrentUser ? '(你)' : ''}
                        </span>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default OnlineUsersBadge;
